<template>
  <div class="main">
    <el-container>
      <el-header>
        <div class="head logo"></div>
        <div class="head slogan">
          <h3>FiberiHome Control Panel</h3>
        </div>
        <div class="head userInfo">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-user-solid"></i>
              <span class="username">{{ $store.state.login.username }}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="checkOutClick"
                >退出登陆</el-dropdown-item
              >
              <el-dropdown-item>忘记密码</el-dropdown-item>
              <el-dropdown-item>版本信息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-row>
            <el-col>
              <el-menu
                :collapse-transition="false"
                @select="selectedMenuHandler"
                :default-active="selectedMenu"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#8bc947"
                router
              >
                <template v-for="route in menu">
                  <template v-if="route.children">
                    <el-submenu :index="route.id.toString()" :key="route.title">
                      <template slot="title">
                        <i class="el-icon-school"></i>
                        <span>{{ route.title }}</span>
                      </template>
                      <template v-for="routechild in route.children">
                        <el-menu-item
                          :key="routechild.title"
                          :index="routechild.path"
                          >{{ routechild.title }}</el-menu-item
                        >
                      </template>
                    </el-submenu>
                  </template>
                  <el-menu-item v-else :index="route.path" :key="route.title">
                    <i class="el-icon-cpu"></i>
                    <span slot="title">{{ route.title }}</span>
                  </el-menu-item>
                </template>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main> <router-view /> </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import localCache from "../../utils/localCache";
export default {
  name: "mainpage",
  data() {
    return {
      selectedMenu: "/main/system",
      menu: [
        {
          title: "系统概况",
          path: "/main/system",
          id: 1,
        },
        {
          title: "机房管理",
          id: 2,
          children: [
            {
              title: "华中一区",
              path: "/main/clusterfirst",
            },
            {
              title: "华中二区",
              path: "/main/clusterscond",
            },
          ],
        },
        {
          title: "云服务器",
          id: 3,
          children: [
            {
              title: "北方大区",
              path: "/main/cloudnorth",
            },
            {
              title: "南方大区",
              path: "/main/cloudsouth",
            },
          ],
        },
        {
          id: 4,
          title: "IP 池",
          path: "/main/ipconfig",
        },
      ],
    };
  },
  methods: {
    selectedMenuHandler(index) {
      this.selectedMenu = index;
      localCache.setCache("selectedMenu", index);
    },
    checkOutClick() {
      console.log("退出登陆");
      localCache.deleteCache("userinfo");
      this.$router.push("/login");
    },
  },
  mounted() {
    const selectedMenu = localCache.getCache("selectedMenu");
    if (selectedMenu) {
      this.selectedMenu = selectedMenu;
    }
  },
};
</script>

<style lang="stylus" scoped>
.main
  width: 100%
  height: 100%
  .el-container
    width: 100%
    height: 100%
    .el-header
      background-color #ccc
      position relative
      .head
        height: 100%
        display: inline-block
        position: absolute
        &.logo
          left: 30px
          width 150px
          text-align: center
          background: url('../../assets/logo.png') no-repeat
          .text
            line-height: 60px
        &.slogan
          left: 40%
          user-select: none
        &.userInfo
          right: 50px
          text-align: center
          line-height: 60px
          .el-dropdown {
            cursor pointer
          }
        .username
          padding: 0 15px
.el-dropdown-link
  vertical-align: baseline
.el-aside
  background-color #545c64
.el-main
  background-color #fff
  padding 0
</style>
